<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 使用第一步：引入 SDK 文件 -->
    <script
      crossorigin="anonymous"
      src="https://pagespy.jikejishu.com/page-spy/index.min.js"
    ></script>
    <script
      crossorigin="anonymous"
      src="https://pagespy.jikejishu.com/plugin/data-harbor/index.min.js"
    ></script>
    <script
      crossorigin="anonymous"
      src="https://pagespy.jikejishu.com/plugin/rrweb/index.min.js"
    ></script>
    <!-- 使用第二步：实例化 PageSpy -->
    <script>
      window.$harbor = new DataHarborPlugin();
      window.$rrweb = new RRWebPlugin();
      [window.$harbor, window.$rrweb].forEach((p) => {
        PageSpy.registerPlugin(p);
      });

      // 实例化的参数是可选的（通过 ESM 方式使用时，必须填写 api 和 clientOrigin）
      window.$pageSpy = new PageSpy({
        // api: "pagespy.jikejishu.com",
        // clientOrigin: "https://pagespy.jikejishu.com",
        project: "React 演示",
        autoRender: true,
        title: "PageSpy 🤝 React",
      });
      // PageSpy 应该已经在屏幕右下角等你了，赶紧试试吧！👉
    </script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script src="/autoRefresh.js"></script>
  </body>
</html>
